<template>
  <div>
    <el-card class="box-card">

      <div slot="header"
           class="clearfix">
        <span style="color: black ; font-weight: 700;">选择首页模版</span>

      </div>

      <div class="flex-around paddFil">
        <div v-for="(item, i) in templateList"
             class="flex-column"
             :key="i">
          <div style="margin-bottom: 10px">
            <img class="avater"
                 @click="templateImage(i)"
                 :src="require(`../../../../assets/Group ${item.img}.png`)"
                 alt="" />
          </div>
          <el-radio v-model="form.homePageTemplate"
                    @input="selsectTemplate"
                    :value="i+1"
                    :label=i+1>{{
				`模板${item.template}`
			  }}</el-radio>
        </div>

      </div>

    </el-card>
    <div class="ele-bottom-tool"
         v-if="validMsg">

      <div class="ele-bottom-tool-actions">
        <el-button type="primary"
                   :loading="loading"
                   @click="submit">
          提交
        </el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { sitePlatformConfigModify, sitePlatformConfigDetail, sitePlatformConfigAdd } from '@/api/basicConfiguration/platformConfiguration/index'
export default {
  name: 'homepage',
  components: {},
  data () {
    return {
      validMsg: false,
      isUpdata: false,
      loading: false,
      currentTemplateIndex: '',
      form: {
        homePageTemplate: 1,
        siteId: this.$store.state.site.info.id
      },
      templateList: [
        {
          img: '2836',
          template: '一'
        },
        {
          img: '2835',
          template: '二'
        },
        {
          img: '2834',
          template: '三'
        },

      ]
    };
  },
  props: {},
  computed: {
    // 是否开启响应式布局
    styleResponsive () {
      return this.$store.state.theme.styleResponsive;
    }
  },
  activated () {
    this.init()

  },
  mounted () {



  },
  methods: {
    // 查询当前是否 是否新增没有新增就是修改
    init () {
      setTimeout(() => {
        this.validMsg = true
      }, 800)
      // 查询回显
      sitePlatformConfigDetail({ siteId: this.form.siteId }).then((msg) => {
        console.log(msg)
        if (msg) {


          if (msg?.homePageTemplate) {
            //   是修改
            this.$util.assignObject(this.form, {
              ...msg,
            });
            this.form.homePageTemplate = parseInt(msg.homePageTemplate)
            this.form.id = msg.id
            this.isUpdata = true
          } else {
            this.$util.assignObject(this.form, {
              ...msg,
            });

            this.form.homePageTemplate = parseInt(msg.homePageTemplate)
            this.form.homePageTemplate = '1'
            this.form.id = msg.id
            this.isUpdata = true
          }

        } else {
          // 修改
          this.isUpdata = false

        }
      })
    },
    selsectTemplate (value) {
      this.currentTemplateIndex = value


    },
    templateImage (i) {
      this.currentTemplateIndex = i + 1
      this.form.homePageTemplate = i + 1
    },
    submit () {
      this.loading = true;
      this.form.homePageTemplate = this.currentTemplateIndex
      const data = { ...this.form }
      console.log(data)
      const saveOrUpdate = this.isUpdata ? sitePlatformConfigModify : sitePlatformConfigAdd;
      saveOrUpdate(data).then((msg) => {
        this.loading = false;
        // id 不存在则调用查询是否已保存，否则保存多次都会不传id
        // if(!this.form.id){
        this.init()
        // }
        this.$message.success(msg);
      }).catch((e) => {
        this.loading = false;
        this.$message.error(e.message);
      });
    }
  }
};
	</script>
<style lang="less" scoped>
.avater {
  width: 222px;
  height: 510px;
  cursor: pointer;
}
.paddFil {
  height: 74vh;
}
/deep/ .ele-bottom-tool-actions {
  text-align: center;
}
/deep/.el-radio__inner:after {
  background-color: #26c278;
}
/deep/.el-radio__inner:after {
  background-color: #26c278;
}

/deep/.el-radio__input.is-checked .el-radio__inner {
  border-color: #26c278;
}
/deep/.el-radio__input.is-checked + .el-radio__label {
  color: #112231;
}
</style>
   